<template>
    <div class="container">
        <div class="container-item">
            <div class="title">今日进群</div>
            <div class="title-text">{{ basicData.today_add || 0 }}</div>
        </div>
        <div class="container-item">
            <div class="title">今日退群</div>
            <div class="title-text">{{ basicData.today_lose || 0 }}</div>
        </div>
        <div class="container-item">
            <div class="title">累计进群</div>
            <div class="title-text">{{ basicData.all_add || 0 }}</div>
        </div>
        <div class="container-item">
            <div class="title">累计退群</div>
            <div class="title-text">{{ basicData.all_lose || 0 }}</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
defineProps(['basicData']);
</script>
<style lang="scss" scoped>
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 32px 24px;
    margin-top: 16px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    border-bottom: 2px solid #ffc69e;

    .container-item {
        text-align: left;

        .title {
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .title-text {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }

    .line-item {
        width: 1px;
        height: 60px;
        background-color: #f0f0f0;
        border-radius: 1px;
    }
}
</style>
